<!DOCTYPE html>
<html class="loading" lang="en" data-textdirection="ltr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta name="author" content="PIXINVENT">
    <title>自助售货管理后台</title>
    <script src="app-assets/js/Dream.js"></script>
    <script src="app-assets/js/Http.js"></script>
    <link rel="stylesheet" type="text/css" href="app-assets/css/vendors.css">
    <link rel="stylesheet" type="text/css" href="app-assets/css/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="app-assets/css/bootstrap-extended.css">
</head>
<body>
<div class="content-wrapper">
    <div class="content-header ">
        <div class="content-header-left mb-2 clearfix">

            <h3 class="content-header-title mb-0 pull-left">编辑商品信息</h3>
            <ol class="breadcrumb pull-right">
                <li><a href="商品列表.html">商品列表</a></li>
                <li class="active">编辑商品信息</li>

            </ol>
        </div>
    </div>
    <div class="card">
        <div class="card-content">
            <div class="card-body">
                <div class="funcbtn clearfix">
                    <div class="pull-left"><a class="btn btn-default" href="商品列表.html"> 返回</a></div>
                </div>
                <div class="form1 form3">
                    <ul class="row">
                        <form id="fromData" method="post" enctype="multipart/form-data">
                            <li class="col-sm-10 col-xs-12">
                                <span>商品ID：</span>
                                <input type="text" readonly class="form-control" value="" name="productId"
                                       id="productId">
                            </li>
                            <li class="col-sm-10 col-xs-12">
                                <span>商品名称：</span>
                                <input type="text" class="form-control" value="" name="productName" id="productName">
                            </li>
                            <li class="col-sm-10 col-xs-12">
                                <span>商品类型：</span>
                                <select class="form-control" name="categoryId" id="categoryId">
                                    <option></option>
                                </select>
                            </li>
                            <li class="col-sm-10 col-xs-12"><span>商品品牌：</span><input type="text" id="brand"
                                                                                         name="brand"
                                                                                         class="form-control">
                            </li>
                            <li class="col-sm-10 col-xs-12"><span>商品售价：</span>
                                <input type="text" id="price" name="price" class="form-control"></li>
                            <li class="col-sm-10 col-xs-12"><span>商品采购价：</span>
                                <input type="text" id="purchasePrice" name="purchasePrice" class="form-control"></li>
                            <li class="col-sm-10 col-xs-12"><span>商品图片：</span>
                                <div class="clearfix">
                                    <div class="pull-left">
                                        <div class="upimgbox"><img id="images" src="app-assets/images/avatar.jpg"></div>
                                        <a href="#" class="file"><input type="file" id="imageUrl"
                                                                        name="imageFile">选择图片</a></div>
                                    <div class="pull-left p-l-20"><p class="text-info">格式：jpg、png、jpeg<br>
                                        像素:*×*<br>
                                        大小:*K</p></div>
                                </div>
                            </li>
                            <li class="col-sm-10 col-xs-12"><span>商品描述：</span><textarea id="description"
                                                                                            name="description"
                                                                                            class="form-control"></textarea>
                            </li>
                            <li class="col-sm-10 col-xs-12"><span>供应商：</span>
                                <select class="form-control" name="supplierId" id="supplierId">
                                    <option></option>
                                </select>
                            </li>
                            <li class="col-sm-10 col-xs-12" style="margin-top: 20px"><input id="insertBt" type="button"
                                                                                            onclick="toList()"
                                                                                            class="btn btn-primary"
                                                                                            value="确认保存">
                            <li class="col-sm-10 col-xs-12" style="margin-top: 20px"><input id="updateBt" type="button"
                                                                                            onclick="toList2()"
                                                                                            class="btn btn-primary"
                                                                                            value="确认保存">
                            </li>
                        </form>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>


<script src="app-assets/js/vendors.min.js" type="text/javascript"></script>
<script src="app-assets/js/app-menu.js" type="text/javascript"></script>
<script src="app-assets/js/app.js" type="text/javascript"></script>
<script src="app-assets/js/echarts.min.js" type="text/javascript"></script>

</body>
</html>

<script>
    (function ($) {
        $.extend({
            getUrlParam: function (name) {
                var urlParams = new URLSearchParams(window.location.search);
                return urlParams.get(name);
            }
        });
    })(jQuery);

    // 使用示例
    $(document).ready(function () {

        // 只有登录才可以进行修改操作
        if(sessionStorage.getItem(  "loginName") == undefined){
            Dreamer.warning("请先登录！",1000,function (){
                window.location.href = "../自助售货管理系统HTML5模板/index.html"
            })
        }

        let id = $.getUrlParam('id');
        if (id) {
            $('#productId').parent().show()
            $('#productId').val(id)
            $('#insertBt').hide()
            //信息绑定
            $.ajax({
                "url": HTTP.getUserInfo+'/products/'+id,
                "type": 'get',
                "dataType": 'json',
                success: function (data) {
                    $('#productName').val(data.data.productName)
                    $('#categoryId').val(data.data.categoryId)
                    $('#brand').val(data.data.brand)
                    $('#price').val(data.data.price)
                    $('#purchasePrice').val(data.data.purchasePrice)
                    $('#description').val(data.data.description)
                    $('#supplierId').val(data.data.supplierId)
                    $('#images').attr("src",HTTP.getUserInfo+"/"+data.data.imageUrl)
                    $('#images').css("opacity",100)
                    $('#updateBt').show()
                }
            })
        } else {
            // 没有ID
            $('#productId').parent().remove()
            $('#insertBt').show()
            $('#updateBt').hide()
        }
    });

    function toList() {
        let from = document.querySelector("#fromData")
        let fromData = new FormData(from)
        $.ajax({
            'url': HTTP.getUserInfo+'/products',
            'type': 'post',
            'contentType': false,
            'processData': false,
            'data': fromData,
            'dataType': 'json',
            'success': toListSuccess
        })
    }

    function toListSuccess(data) {
        if (data.code === 200) {
            Dreamer.success("新增成功",1000,function () {
                window.location.href = "../自助售货管理系统HTML5模板/商品列表.html"
            })
        } else {
            Dreamer.error(data.message)
        }
    }

    //绑定商品类型
    $.ajax({
        'url': HTTP.getUserInfo+'/categories/list',
        'type': 'get',
        'dataType': 'json',
        'success': function (data) {
            $('#categoryId option').remove()
            data.data.forEach(dd => {
                $('#categoryId').append(`<option value="${dd.categoryId}">${dd.categoryName}</option>`)
            })

        }

    })
    //绑定供应商
    $.ajax({
        'url': HTTP.getUserInfo+'/suppliers/list',
        'type': 'get',
        'dataType': 'json',
        'success': function (data) {
            $('#supplierId option').remove()
            data.data.forEach(dd => {
                $('#supplierId').append(`<option value="${dd.supplierId}">${dd.supplierName}</option>`)
            })
        }
    })

    // 图片选中
    $('#imageUrl').on('change', function(event) {
        // event.target.files 获取到的是一个FileList对象，包含了用户选择的所有文件
        let files = event.target.files;
        if (files.length > 0) {
            // 只处理第一个被选中的文件
            let file = files[0];
            // 这里可以根据需要执行更多操作，比如预览图片、上传文件等
            let url = URL.createObjectURL(file)
            $('#images').attr("src",url)
            $('#images').css("opacity",100)
        }
    });



    function toList2() {
        let from = document.querySelector("#fromData")
        let fromData = new FormData(from)
        $.ajax({
            'url': HTTP.getUserInfo+'/products/update',
            'type': 'post',
            'contentType': false,
            'processData': false,
            'data': fromData,
            'dataType': 'json',
            'success': toListSuccess2
        })
    }

    function toListSuccess2(data) {
        if (data.code === 200) {
            Dreamer.success("修改成功",1000,function (){
                window.location.href = "../自助售货管理系统HTML5模板/商品列表.html"
            })

        } else {
            Dreamer.error(data.message)
        }
    }
</script>

